<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>王中王游戏机</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="main flex-page">
    <div class="game">
        <div class="game-head">
            <div class="leftdoc"><img src="img/left.png"/></div>
            <div class="centerdoc">
                <div id="screen"></div>
                <div class="logo">
                    <div class="text">
                        <a target="_blank" href="https://www.microanswer.cn">Microanswer</a>
                    </div>
                </div>
            </div>
            <div class="rightdoc"><img src="img/right.png"/></div>
        </div>
        <div class="game-body">
            <div class="controller-flex">
                <div class="controller-left">
                    <div class="controller-left-row">
                        <div class="btn-parent controller-div" key="up"><button class="btn">上</button></div>
                        <div class="btn-parent controller-div" key="right"><button class="btn">右</button></div>
                    </div>
                    <div class="controller-left-row">
                        <div class="btn-parent controller-div" key="left"><button class="btn">左</button></div>
                        <div class="btn-parent controller-div" key="down"><button class="btn">下</button></div>
                    </div>
                </div>
                <div class="controller-right">
                    <button class="big btn controller-div rotate" key="rotate">旋转</button>
                </div>
            </div>
            <table>
                <tr>
                    <td colspan="7">
                        <div style="height: 30px;color: #019CD6" key="zjtip"></div>
                    </td>
                </tr>
                <tr>
                    <td colspan="7">
                        <div>
                            <div class="d-inline">
                                <button class="btn controller-div small" key="start"></button>
                               <div class="text-center small">开始</div>
                            </div>
                            <div class="d-inline">
                                <button class="btn controller-div small" key="voice"></button>
                                <div class="text-center small">声音</div>
                            </div>
                            <div class="d-inline">
                                <button class="btn controller-div small" key="onoff"></button>
                                <div class="text-center small">开关</div>
                            </div>
                            <div class="d-inline">
                                <button class="btn controller-div small" key="reset"></button>
                                <div class="text-center small">复位</div>
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <div class="right">

        <div class="txt-borad border-bottom-right-12">
            <h3 class="text-center">掌上游戏机</h3>
            <p>
                这是一款模拟儿时的掌上游戏机。目前实现了《坦克大战》、《赛车》、《太空大战》、《俄罗斯方块》、《贪吃蛇》和《对对碰》这六款游戏，还有更多游戏正在实现中。
            </p>
            <hr style="margin: 10px 20px">
            <p>
                作者：<a href="https://www.microanswer.cn">Microanswer</a><br>
                源码：<a href="https://github.com/MicroAnswer/wzwgame" target="_blank">Github</a><br>
            </p>
        </div>

        <div class="txt-borad mt-15 border-top-right-12 border-bottom-right-12">
            <h3 class="text-center">玩法介绍</h3>
            <p>可以直接按键盘上对应按键操作。</p>
            <ul>
                <li><kbd>W</kbd>、<kbd>↑</kbd> 键： 上</li>
                <li><kbd>A</kbd>、<kbd>←</kbd> 键： 左</li>
                <li><kbd>S</kbd>、<kbd>↓</kbd> 键： 下</li>
                <li><kbd>D</kbd>、<kbd>→</kbd> 键： 右</li>
                <li><kbd>空格</kbd>、<kbd>回车</kbd> 键： 旋转</li>
                <li><kbd>Z</kbd> 键： 开始</li>
                <li><kbd>X</kbd> 键： 声音</li>
                <li><kbd>C</kbd> 键： 开关</li>
                <li><kbd>V</kbd> 键： 复位</li>
            </ul>
            <p>
                按钮说明:
                【上、下、左、右】这些按钮控制玩家移动。【旋转】切换各个游戏，在不同游戏内有不同的效果，例如变形、发射等。
                【开始】选中某个游戏后点击开始即可游戏，进入游戏后点击开始则暂停，再次点击恢复。【声音】未实现。【开关】开关机。
                【复位】任何时候点击复位都将直接回到初始界面。
            </p>
        </div>
    </div>
</div>
<div class="foot">
    <% if (htmlWebpackPlugin.options.useCNZZ){ %>
    <script>
        var _hmt = _hmt || [];
        (function() {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?29ae6ae43caa73ae5831facbd1f166e7";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
    <% } %>
    <small id="testspan"></small>
</div>
</body>
</html>
